{% extends "base.html" %}

{% block title %}内容舆情分析{% endblock %}

{% block breadcrumb %}内容舆情分析{% endblock %}

{% block extra_css %}
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
{% endblock %}

{% block content %}
<!-- 时间范围选择 -->
<div class="date-range-picker">
    <button class="btn-text active">今日</button>
    <button class="btn-text">本周</button>
    <button class="btn-text">本月</button>
    <button class="btn-text">自定义</button>
    <div class="custom-date">
        <input type="date"> - <input type="date">
    </div>
</div>

<!-- 分析概览 -->
<div class="analysis-overview">
    <div class="chart-card">
        <h3>情感趋势分析</h3>
        <div id="sentimentTrend" style="height: 300px;"></div>
    </div>
    <div class="chart-card">
        <h3>热点话题分布</h3>
        <div id="topicDistribution" style="height: 300px;"></div>
    </div>
    <div class="chart-card">
        <h3>传播渠道分析</h3>
        <div id="channelAnalysis" style="height: 300px;"></div>
    </div>
    <div class="chart-card">
        <h3>地域分布热图</h3>
        <div id="regionHeatmap" style="height: 300px;"></div>
    </div>
</div>

<!-- 详细分析报告 -->
<div class="analysis-details">
    <div class="card">
        <div class="card-header">
            <h3>热点事件分析</h3>
            <div class="card-tools">
                <button class="btn-icon">
                    <i class="material-icons">file_download</i>
                </button>
            </div>
        </div>
        <div class="event-timeline">
            <!-- 事件时间线 -->
            <div class="timeline-item">
                <div class="time">10:00</div>
                <div class="content">
                    <h4>热点事件标题</h4>
                    <p>事件描述内容...</p>
                    <div class="metrics">
                        <span>转发量: 1.2k</span>
                        <span>评论量: 3.4k</span>
                        <span>情感: 正面</span>
                    </div>
                </div>
            </div>
            <!-- 更多时间线项 -->
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 图表初始化代码
// ...
</script>
{% endblock %} 